<template>
	<div class="videoFile-container">
		<el-dialog title="配置录像文件存储类型" width="526px" :visible.sync="showVideoFile" :before-close="closevideoFile" custom-class="videoFile">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="type">
					<template v-if="!form.isEdit">
						<div class="radio" v-for="item in videoFileData.radioData" :key="item.id">
							<!-- @change="changeType(item.type)" -->
							<el-radio :label="item.type" v-model="form.type" :disabled="showDetail" :style="item.id === 2 || item.id === 3 ? 'padding-top:18px' : ''">{{ item.title }}</el-radio>
							<div v-if="form.type == item.type">
								<div v-if="item.type === 'nas'">
									<span class="asterisk-text">*</span>
									<el-form-item label="" prop="localDisk">
										<el-input v-model="form.localDisk" placeholder="请配置录像文件存储的nas盘地址" :disabled="showDetail" class="input-textOverFlow"></el-input>
									</el-form-item>
									<el-form-item label="" prop="nasUrl" style="margin-top: 15px">
										<el-input v-model="form.nasUrl" placeholder="您可配置录像成功后通知的第三方服务url地址" :disabled="showDetail" class="input-textOverFlow"></el-input>
									</el-form-item>
								</div>
								<div v-if="item.type === 'ali'">
									<el-form-item label="" prop="aliossUrl">
										<el-input v-model="form.aliossUrl" placeholder="您可配置录像成功后通知的第三方服务url地址" :disabled="showDetail" class="input-textOverFlow"></el-input>
									</el-form-item>
								</div>
								<div v-if="item.type === 'aws'">
									<el-form-item label="" prop="awsUrl">
										<el-input v-model="form.awsUrl" placeholder="您可配置录像成功后通知的第三方服务url地址" :disabled="showDetail" class="input-textOverFlow"></el-input>
									</el-form-item>
								</div>
							</div>
						</div>
					</template>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!showDetail">
				<el-button @click="onClose" class="cancel-btn">关 闭</el-button>
				<el-button type="primary" class="ok-btn" @click="surevideoFile">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		showVideoFile: {
			type: Boolean,
			default: () => false,
			require: true
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		videoFileData: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		const validateUrl = (rule, value, callback) => {
			console.log(value);
			let flag = new RegExp(/(http|https):\/\/\S*/).test(value);
			if (!value) {
				return callback();
			} else if (!flag) {
				return callback(new Error('所输入的URL地址需为https://或http://开头'));
			}
			return callback();
		};
		return {
			form: this.videoFileData.modelForm,
			rules: {
				localDisk: [{ required: true, message: '请输入录像文件存储的nas盘地址', trigger: 'blur' }],
				nasUrl: [{ validator: validateUrl, trigger: 'blur' }],
				aliossUrl: [{ validator: validateUrl, trigger: 'blur' }],
				awsUrl: [{ validator: validateUrl, trigger: 'blur' }]
			}
		};
	},
	mounted() {
		console.log(this.videoFileData);
	},
	methods: {
		closevideoFile() {
			this.form.aliossUrl = '';
			this.form.awsUrl = '';
			this.form.localDisk = '';
			this.form.nasUrl = '';
			this.$emit('closevideoFile');
		},
		onClose() {
			this.form.aliossUrl = '';
			this.form.awsUrl = '';
			this.form.localDisk = '';
			this.form.nasUrl = '';
			this.$emit('closevideoFile');
		},
		surevideoFile() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.$emit('surevideoFile');
					this.$refs['form'].resetFields();
				} else {
					console.error('error submit!!');
					return false;
				}
			});
		},
		changeType(type) {
			console.log(type);
			if (type === 'ali') {
				this.form.aliossUrl = '';
			} else if (type === 'aws') {
				this.form.awsUrl = '';
			} else if (type === 'nas') {
				this.form.localDisk = '';
				this.form.nasUrl = '';
			}
		}
	}
};
</script>

<style lang="less">
.videoFile {
	.el-dialog__header {
		border-bottom: 1px solid #eee;
	}
	.el-dialog__footer {
		border-top: 1px solid #eee;
	}
	.radio {
		margin-left: -90px;
	}
	.asterisk-text {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fc3e3e;
		position: absolute;
		top: 29px;
		left: -100px;
	}
	// 多余内容在失焦时...展示
	.input-textOverFlow .el-input__inner {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
